<template>
  <ul class="homeArticle-container">
    <li class="article-item" v-for="(item, index) in homeArtData" :key="item._id">
      <div class="content" @click="goArtDetail(item._id)">
        <a class="article-title" href="javascript:;">{{ item.title }}</a>
        <div class="brief">
          <div v-html="item.content" class="briefContent"></div>
        </div>
        <div class="author-info">
          <div class="browseCom">
            <span><i class="iconfont icon-icon-"></i>浏览{{ item.views }}</span>
            <span><i class="iconfont icon-006pinglunhuifu"></i>评论{{ item.coms.length }}</span>
          </div>
          <div class="author">
            <img :src="item.author.headImgUrl">
            <div class="info">
              <span>作者:{{ item.author.username }}</span>
              <span>{{ dayjs(item.createdAt).format('YYYY-MM-DD HH:MM:ss') }}</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <n-button tertiary type="info" class="loadMore" @click="loadMore">
    加载更多
    <n-spin size="small" v-if="loadShow" />
  </n-button>

</template>

<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NSpin } from 'naive-ui'
const axios = inject('axios')
const dayjs = inject('dayjs')
const message = inject('message')
const router = useRouter()
let homeArtData = ref([])
const articleNum = reactive({
  page: 0,
  pagesize: 6
})

onMounted(() => {
  loadHomeArt()
})
const loadHomeArt = async () => {
  loadShow.value = true
  let { page, pagesize } = articleNum
  const result = await axios.get('/api/front/articles/all', {
    params: {
      page,
      pagesize
    }
  })
  console.log('前台文章信息', result);
  homeArtData.value = result.data.data
  console.log(homeArtData);
  if (result.data.data.length < pagesize) {
    message.error('没有数据了哦')
  }
  loadShow.value = false
}
// 加载更多
const loadMore = () => {
  articleNum.pagesize += 6
  loadHomeArt()
}
// 加载动画
const loadShow = ref(false)
// 查看文章详情
const goArtDetail = (aid) => {
  router.push({ path: '/detail', query: { aid } })
}
</script>

<style lang="scss" scoped>
.homeArticle-container {

  display: flex;
  flex-wrap: wrap;
  list-style: none;
  width: 100vw;
  justify-content: space-around;



  .article-item {
    margin-top: 20px;
    width: 40%;

    .content:hover {
      box-shadow: 1px 2px 17px 0px #7eb6d1;
      top: -2px;
      cursor: pointer;
    }

    .content {
      border-radius: 5px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all .5s;
      box-shadow: 1px 1px 8px 0px #cfd1d2;

      a {
        text-decoration: none;
      }


      .brief {
        width: 100%;
        text-indent: 2em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

        :deep(img) {
          width: 100px;
        }

      }
    }

    .author-info {
      margin-top: 15px;
      width: 100%;
      height: 50px;
      display: flex;

      .browseCom {
        width: 100%;
        display: flex;
        align-items: center;

        span {
          margin: 0 10px;
        }
      }

      .author {
        display: flex;
        justify-content: end;
        align-items: center;
        margin-right: 10px;
        width: 100%;
        color: rgb(85, 146, 200);

        span:nth-child(1) {
          margin-right: 15px;
        }

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-bottom: 20px;
          margin-right: 10px;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
      }
    }
  }

}

.loadMore {
  position: relative;
  bottom: 0;
  margin-left: 50%;
  margin-top: 10px;
}
</style>